<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>{{ msg }}</h3>
    <p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁了</p>
    <button @click="onClick">修改ref数据</button>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    // 解构出 createApp, ref 函数
    const { createApp, ref } = Vue

    createApp({
      setup () {
        // ref 定义一个响应式字符串
        const msg = ref('Hello Vue3')

        // ref 定义一个响应式对象
        const obj = ref({
          name: '小vue',
          age: 9
        })
        // 点击事件
        const onClick = () => {
          // 修改 msg 
          msg.value = '你好, Vue3'

          // 修改 obj 的 name 和 age 属性
          obj.value.name = 'Vue3'
          obj.value.age = 10
        }

        return {
          msg,
          obj,
          onClick
        }
      }
    }).mount('#app')
  </script>
</body>

</html>